<template>
  <div class="home">
    <h-card :data="cardData">
      <i slot="icon" class="iconfont icon-dingdan"></i>
      <!-- 
          scope:    { xx: data对象  }
       -->
      <!-- <template slot-scope="scope"> -->
      <!-- <h5>{{ scope.xx.title }}</h5> -->
      <!-- <p>{{ scope.xx.num | formatNumber }}</p> -->
      <!-- <p class="text">备注：虚构的</p> -->
      <!-- </template> -->
    </h-card>

    <!-- echarts -->
    <div id="homeCharts" style="height: 400px"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import HCard from './HCard.vue'

import { getHomeChartsData } from '@/api/order'

export default {
  components: {
    HCard
  },
  data() {
    return {
      cardData: { title: '总订单', num: 1235425 },

      cardDatas: [
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        }
      ]
    }
  },
  methods: {
    // 绘制折线图
    drawLine(xData, orderData, amountData) {
      this.lineCharts = echarts.init(document.querySelector('#homeCharts'))

      const option = {
        // 标题
        title: {
          text: '数据统计',
          textStyle: {
            color: '#333',
            fontSize: 12
          },
          top: 15,
          left: 15
        },
        // 图例
        legend: {
          data: ['订单', '销售统计'],
          top: 15
        },
        color: ['#80FFA5', '#00DDFF'],

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgba(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: orderData
          },
          {
            name: '销售统计',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgba(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: amountData
          }
        ]
      }

      // 使用配置 创建echarts报表
      this.lineCharts.setOption(option)
    },

    // 窗口大小改变
    resize() {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用。
      this.lineCharts.resize()
    }
  },
  async mounted() {
    // 获取首页报表数据
    let res = await getHomeChartsData()

    // 解构数据
    let {
      totalOrder,
      totalAmount,
      todayOrder,
      totayAmount,

      xData,
      orderData,
      amountData
    } = res.data

    console.log(xData, orderData, amountData)

    this.drawLine(xData, orderData, amountData)

    // 监听window的窗口大小改变
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    // 解绑挂在window上的事件[性能优化]
    window.removeEventListener('resize', this.resize)
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}

.text {
  font-size: 10px;
}

#homeCharts {
  margin-top: 30px;
  background-color: #fff;
}
</style>
